<div class="modal-header">
    <h2>{{'audit_history'| translate}}</h2>
</div>
<div class="modal-body page" ng-class="{'waiting-box':model.showStatus === 'waiting'}">
    <div ng-if="model.showStatus === 'data_available'">
        <span class="row">
            <input class="form-control col-md-7" ng-model="model.searchText" ng-attr-placeholder="{{model.searchPlaceholder}}" type="search" />
        </span>
        <div class="scroll">
            <table class="listTable dhis2-table-striped-border">
                <thead>
                    <tr>
                        <th ng-repeat="col in model.auditColumns">
                            <span ng-switch="col">
                                <span ng-switch-when="name">
                                    {{model.name}}
                                </span>
                                <span ng-switch-default>
                                	{{col | translate}}
                                </span>                                    
                            </span>
                        </th>
                    </tr>
                </thead>
                <tbody ng-repeat="row in model.uniqueRows">
                    <tr ng-repeat="item in model.itemList | orderBy: 'created':reverse | filter: {name: row} | filter: {name: model.searchText}" ng-init="rowIndex = $index">
                        <td ng-repeat="col in model.auditColumns"
                            rowspan="{{(model.itemList | filter: {name: row} | filter: model.searchText).length}}"
                            ng-if="col === 'name' && rowIndex === 0">
                            {{item[col]}}
                        </td>
                        <td class="wrap-text" ng-repeat="col in model.auditColumns" ng-if="col !== 'name'">
                        	<span ng-if="col === 'value'">
                        		<span ng-switch="item.valueType">
				                    <span ng-switch-when="BOOLEAN">
				                        <span ng-if="item[col] === 'true'">{{'yes'| translate}}</span>
				                        <span ng-if="item[col] === 'false'">{{ 'no' | translate}}</span>
				                    </span>
				                    <span ng-switch-when="TRUE_ONLY">
				                        <span ng-if="item[col]">
				                            <i class="fa fa-check"></i>
				                        </span>
				                    </span>
				                    <span ng-switch-default>{{item[col]}}</span>
				                </span>
                        	</span>
                        	<span ng-if="col !== 'value'">
                        		{{item[col]}}
                        	</span>
                        	                            
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div ng-if="model.showStatus === 'data_unavailable'">
        <div class="alert alert-warning">{{'audit_history_unavailable'| translate}}</div>
    </div>
    <div ng-if="model.showStatus === 'waiting'">
        <i class="fa fa-spinner fa-spin audit-spinner"></i>
        <div class="loading-audit-data">{{'loading-audit-data' | translate}}</div>
    </div>
</div>
<div class="modal-footer" ng-if="model.showStatus !== 'waiting'">
    <button type="button" class="btn btn-default" data-ng-click="close()">{{'close'| translate}}</button>
</div>